<template>
  <default-home-card icon="RadarChartOutlined" title="基金用途预算 单位/万元">
    <a-spin :spinning="spinning" tip="图表加载中....">
      <div class="echarts-box">
        <div class="pie-main" id="pie-main"></div>
      </div>
    </a-spin>
  </default-home-card>
</template>
<script setup>
  import DefaultHomeCard from '/@/views/system/home/components/default-home-card.vue';
  import * as echarts from 'echarts';
  import { onMounted, ref } from 'vue';
  import { Echarts } from '../../../../../api/echarts/echarts';
  import { smartSentry } from '/@/lib/smart-sentry';
  const spinning = ref(true);
  onMounted(() => {
    init();
  });

  async function init() {
    try {
      let data = [];
      let res = await Echarts.EchartsBudget();
      spinning.value = false;
      console.log(res, '预算');
      data = res.data;
      //存放需要显示刻度值
      const arr = [];
      //颜色
      const colorList = ['rgba(0,183,238, 1)', 'rgba(86,199,60, 1)'];
      //指示器数组
      const indicatorList = data;
      const maxValues = indicatorList.map((item) => item.max);

      // 格式化为所需的 seriesList 格式
      const seriesList = [maxValues];
      //真实后端数据
      // 配置项
      const option = {
        color: colorList,
        tooltip: {
          show: true,
          trigger: 'item',
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
            dataView: {
              show: true,
              lang: ['预算分配', '关闭', '刷新'],
              optionToContent: function (param) {
                let table = '<table border="1" style="border-collapse: collapse;">';
                table += '<tr><th>名称</th><th>金额(万元)</th></tr>';
                data.forEach((item) => {
                  table += `<tr><td style="padding: 8px;text-align: center;">${item.name}</td><td style=" padding: 8px;text-align: center;">${item.max}</td></tr>`;
                });
                table += '</table>';
                return table;
              },
            },
          },
          itemSize: 18,
          showTitle: false,
          tooltip: {
            show: true, // 是否展示提示组件
            formatter: '{b}', // 提示框显示内容，{a} 默认英文名称, {b} 默认中文名称
            formatter: function (param) {
              switch (param.name) {
                case 'dataView':
                  return '<div>' + '数据视图' + '</div>';
                  break;
                case 'restore':
                  return '<div>' + '刷新' + '</div>';
                  break;
                case 'saveAsImage':
                  return '<div>' + '下载' + '</div>';
                  break;
                default:
                  break;
              }
            },
          },
        },
        backgroundColor: '#fff',
        radar: {
          center: ['50%', '50%'],
          radius: '80%',
          startAngle: 90,
          splitNumber: 4,
          splitArea: {
            areaStyle: {
              color: ['transparent'],
            },
          },
          name: {
            color: '#999',
          },
          axisLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#d1d1d1',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#099B93',
            },
          },
          indicator: indicatorList,
        },
        series: [
          {
            name: '基金用途预算',
            type: 'radar',
            symbol: 'circle',
            //连接处小圆圈大小
            symbolSize: 1,
            areaStyle: {
              normal: {
                //径向渐变
                color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
                  { offset: 1, color: '#099B93' },
                  { offset: 0.46, color: 'rgba(192,255,0,0.74)' },
                  { offset: 0, color: '#FFD904' },
                ]),
              },
            },
            itemStyle: {
              color: '#6CC3BF',
              borderColor: '#099B93',
              borderWidth: 3,
            },
            //线的颜色
            lineStyle: {
              normal: {
                color: '#6CC3BF',
                width: 2,
              },
            },
            label: {
              normal: {
                show: true,
                color: '#000',
              },
            },
            data: seriesList,
          },
        ],
      };

      let chartDom = document.getElementById('pie-main');
      if (chartDom) {
        let myChart = echarts.init(chartDom);
        option && myChart.setOption(option);
      }
    } catch (error) {
      smartSentry.captureError(error);
    }
  }
</script>
<style lang="less" scoped>
  .echarts-box {
    display: flex;
    align-items: center;
    justify-content: center;
    .pie-main {
      width: 100%;
      height: 500px;
      background: #fff;
    }
  }
</style>
